<template>
    <div class="qilin-QilinForm">
        <el-form 
            :ref="refName"
            :model="ownFormConfig.submitData"
            :rules="ownFormRules"
            :label-position="ownFormConfig.elFormConfig.labelPosition || 'right' "
            :label-width="ownFormConfig.elFormConfig.labelWidth || '60px' "
            :size="ownFormConfig.elFormConfig.size || 'small' "
            :class="ownFormConfig.elFormConfig.className"
        >
            <template v-for="(item,index) in ownFormConfig.itemConfig">
                <el-form-item
                    :key="item.dataName || 'form-key-'+index "
                    :label="item.labelName || '默认名称'+index "
                    :prop="item.dataName"
                    :class="[
                        'width'+(item.width ? item.width : 24),
                        item.className
                    ]"
                >
                    <template v-if="item.type === 'input' || !item.type ">
                        <el-input 
                            :type="item.inputType || 'text' "
                            v-model="ownFormConfig.submitData[item.dataName]"
                            :clearable="item.clearable || true "
                            :disabled="item.disabled || false "
                            :placeholder="item.placeholder || '请输入'+item.labelName "
                            :show-password="item.showPassword || false "
                            :rows="item.rows || 2 "
                        ></el-input>
                    </template>
                    <template v-else-if="item.type === 'select' ">
                        <el-select
                            v-model="ownFormConfig.submitData[item.dataName]"
                            :clearable="item.clearable || true "
                            :disabled="item.disabled || false "
                            :multiple="item.disabled || false "
                            :filterable="item.filterable || true "
                            @change="(value)=>{item.change && item.change(value,item)}"
                            @clear="()=>{item.clear && item.clear(item)}"
                        >
                            <el-option
                                v-for="optItem in ownFormConfig.selectLists[item.dataListName]"
                                :key="optItem.value"
                                :disabled="optItem.disabled || false "
                                :label="optItem.label"
                                :value="optItem.value"
                            ></el-option>
                        </el-select>
                    </template>
                    <template v-else-if="item.type === 'uploadImage' ">
                        <QilinUploadImage
                            v-model="ownFormConfig.submitData[item.dataName]" 
                            :uploadImageConfig="item"
                            @success="(fileList)=>{ownFormConfig.submitData[item.dataName]=fileList}"
                        ></QilinUploadImage>
                    </template>
                </el-form-item>
            </template>
            <el-form-item v-if="ownFormConfig.buttonConfig.length > 0"
                class="qilin-QilinForm-button"
            >
                <template v-for="(item,index) in ownFormConfig.buttonConfig">
                    <el-button 
                        :key="'button-'+index"
                        :type="item.type || 'primary' "
                        :class="item.className"
                        @click="item.click && item.click(item.formRefName)"
                    >{{item.btnName || "按钮" }}</el-button>
                </template>
            </el-form-item>
        </el-form>
        <slot name="form-login-tip"></slot>
    </div>
</template>
<script>
import QilinFormRules from "./formRules.js";

import QilinUploadImage from "./QilinUploadImage.vue";
export default {
    name:"QilinForm",
    props:{
        // 元素的ref别名
        refName:{
            type:String,
            default:"formData"
        },
        // 表单的相关配置项
        formConfig:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    components:{
        QilinUploadImage
    },
    data(){
        return {
            // 组件自身的默认配置
            ownFormConfig:{
                // el-form标签上的相关配置
                elFormConfig:{},
                // 表单结构相关配置项
                itemConfig:[],
                // 下拉数据集
                selectLists:[],
                // 提交到后台的数据集
                submitData:{},
                // 表单底部操作提交按钮相关配置项
                buttonConfig:[]
            },
            // 组件自身的校验规则
            ownFormRules:{}
        }
    },
    computed:{
        multipleAttr(){
            return [this.formConfig.submitData,this.formConfig.selectLists];
        }
    },
    watch:{
        formConfig:{
            handler(newValue,oldValue){
                this.initOwnFormConfig(newValue);
            },
            immediate:true,
            deep:true
        },
        // "formConfig.submitData":{
        //     handler(newValue,oldValue){
        //         console.log(22);
        //         this.initOwnFormConfig(this.formConfig);
        //     },
        //     immediate:true,
        //     deep:true
        // },
        // "formConfig.selectLists":{
        //     handler(newValue,oldValue){
        //         console.log(22);
        //         this.initOwnFormConfig(this.formConfig);
        //     },
        //     immediate:true,
        //     deep:true
        // },
        // "formConfig.itemConfig":{
        //     handler(newValue,oldValue){
        //         console.log(22);
        //         this.initOwnFormConfig(this.formConfig);
        //         // this.createFormRules();
        //     },
        //     immediate:true,
        //     deep:true 
        // }
    },
    methods:{
        // 将传入进来的表单配置项赋值给组件自身
        initOwnFormConfig(target){
            for(let key in target){
                if(Object.keys(this.ownFormConfig).includes(key)){
                    this.ownFormConfig[key]=target[key];
                };
            };
        },
        // 调用el-form表单组件的校验事件监听
        formValidate(callback){
            this.$refs[this.refName].validate((valid)=>{
                if(callback){
                    callback(valid);
                };
            });
        },
        // 调用el-form表单组件的清空校验事件监听
        formResetFields(){
            this.$nextTick(()=>{
                this.$refs[this.refName].resetFields();
                for(let key in this.ownFormConfig.submitData){
                    this.ownFormConfig.submitData[key]="";
                };
            });
        },
        // 调用el-form表单组件的单字段清除校验事件监听
        formClearValidate(dataName){
            this.$refs[this.refName].clearValidate(dataName);
        },
        // 创建表单的校验规则
        createFormRules(){
            let ruleObj={};
            this.ownFormConfig.itemConfig.forEach((item)=>{
                if(item.validate && item.validate.length>0){
                    ruleObj[item.dataName]=item.validate;
                };
                if(item.otherValidate){
                    if(ruleObj[item.dataName] && ruleObj[item.dataName].length>0){
                        ruleObj[item.dataName]=ruleObj[item.dataName].concat(QilinFormRules[item.otherValidate]);
                    }else{
                        ruleObj[item.dataName]=QilinFormRules[item.otherValidate];
                    };
                };
            });
            this.ownFormRules=ruleObj;
        }
    },
    created(){
        this.createFormRules();
    }
}
</script>
<style lang="less" scoped>
.qilin-QilinForm{
    width:100%;
    >.el-form{
        >.width24{
            width:100%;
        }
        >.width18{
            width:75%;
        }
        >.width16{
            width:66.66%;
        }
        >.width12{
            width:50%;
        }
        >.width8{
            width:33.33%;
        }
        >.width6{
            width:25%;
        }
        >.el-form-item.qilin-QilinForm-button{
            ::v-deep >.el-form-item__content{
                margin-left:0!important;
                text-align:center;
            }
        }
        .el-select{
            width:100%;
        }
    }
}
</style>